<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>看板素材配置</title>
<script type="text/javascript" th:src="@{/js/configlist/list.js}"></script>
<style>
	.el-dialog__body {padding-top: 5px !important; padding-bottom: 10px !important;}
	.el-transfer-panel__body {height:220px !important;} 
	.el-transfer-panel{width:400px !important; }
	.el-transfer {padding-left: 130px !important;}
	.el-transfer-panel__filter {margin: 5px !important;}
	.el-dialog__wrapper {right: 40px !important;left: 40px !important;}
	.el-input--small{ height: 32px; }
	.el-select {background-color: #fff; background-image: none; border-radius: 4px; border: 1px solid #dcdfe6; box-sizing: border-box; color: #606266; display: inline-block; font-size: inherit; height: 32px; line-height: 1; outline: none; padding: 0 15px; transition: border-color .2s cubic-bezier(.645,.045,.355,1); width: 100%; }
</style>
</head>
<body>
	<div id="pageDiv">
	 	<div>
	 		<input type="hidden" th:value="${configId}" id="pollingConfigId">
	    	<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item>看板配置</el-breadcrumb-item>
			  <el-breadcrumb-item>【</span><span th:text="${pollingConfig.kanbanPoition}"></span>】详细配置</el-breadcrumb-item>
			  <!-- 对应看板的ID 注意不可删除 -->
			</el-breadcrumb>
		</div>
		<br/>
		<!-- 新增 -->
		<div>
			<template>
			
			    <el-button size="small" type="primary" @click="openAddDialog()">新增</el-button>
				<el-button size="small" type="primary" onclick="openTab('/pollingConfig/toList')">返回</el-button>
				
				<!-- 新增弹窗 使用dialog方式  fullscreen-->
				<el-dialog title="新增看板配置" :visible.sync="dialogAdd" fullscreen left >
			    	<el-transfer  filterable :filter-method="filterMethod" filter-placeholder="请输入素材名称" :titles="['素材列表', '已选素材']" v-model="transferValue" :data="transferData" @change="changeMaterial();"></el-transfer>
					<!-- 列表  表格 -->
					<el-table  v-loading="loading" :data="configTableData" height="265"  style="width: 100%" >
						<el-table-column label="素材名称" prop="materialName" width="300">
					    </el-table-column>
						<el-table-column   label="素材类型" width="250">
							<template slot-scope="scope">
								<!-- 素材Id -->
								<input name="addConfig.materialId" type="hidden" :value='scope.row.materialId' >
								<select name="addConfig.showType" value="" placeholder="请选择素材类型" class="el-select">
								  <option label="==请选择素材类型==" value=""></option>
							      <option label="视频" value="video"></option>
							      <option label="PPT" value="ppt"></option>
							      <option label="图片" value="pic"></option>
							      <option label="表格" value="table"></option>
							    </el-select>
							</template>
						</el-table-column>
					    <el-table-column  label="轮播时长" width="300">
					   		 <template slot-scope="scope">
					   		 	<el-col :span="6">
					   		 		<input name="addConfig.hour" placeholder="时" class="el-input--small el-input__inner" >
							    </el-col>
							    <el-col :span="2">&nbsp;时</el-col>
							    <el-col :span="6">
							    	<input name="addConfig.minute" placeholder="分" class="el-input--small el-input__inner" >
							    </el-col>
							     <el-col :span="2">&nbsp;分</el-col>
							    <el-col :span="6">
							   		<input name="addConfig.second" placeholder="秒" class="el-input--small el-input__inner" >
							    </el-col>
							     <el-col :span="2">&nbsp;秒</el-col>
					    	 </template>
					    </el-table-column>
					    <el-table-column  label="轮播顺序" width="200" >
					    	<template slot-scope="scope">
					    		<input name="addConfig.showOrder" placeholder="轮播顺序" value='-1' class="el-input--small el-input__inner" >
					    	</template>
					    </el-table-column>
					     <el-table-column  label="报表刷新时间" >
					    	<template slot-scope="scope">
					    		<input name="addConfig.tableTimer" placeholder="报表刷新时间" class="el-input--small el-input__inner" >
					    	</template>
					    </el-table-column>
					</el-table>
					
					<div style="padding-top:10px; text-align:center">
					    <el-button size="mini" type="primary" @click="addConfigList()">确定</el-button>
					    <el-button size="mini" type="primary" @click="closeDialog()">取消</el-button>
					</div>
			    </el-dialog>
			    
			</template>
		</div>
		<br/>
		
		<!-- 查询 -->
		<div>
			<template>
				<!-- 列表  表格 -->
				<el-table  v-loading="loading" :data="tableData" height="430"  style="width: 100%">
				    <el-table-column prop="showTypeDesc" label="素材类型" width="100"></el-table-column>
				    <el-table-column prop="materialRealName" label="素材名称" width="200"></el-table-column>
				    <el-table-column prop="durationDesc" label="轮播时长" width="180"></el-table-column>
				    <el-table-column prop="showOrder" label="轮播顺序" width="150"></el-table-column>
				    <el-table-column prop="showOrNot" label="状态" width="180"></el-table-column>
				    <el-table-column label="操作">
				      <template slot-scope="scope">
						<el-button size="mini" type="primary" plain @click="getConfigData(scope.row)">修改</el-button>
						<el-button size="mini" type="primary" plain @click="materialReviwe(scope.row.showType,scope.row.materialName)">素材预览</el-button> 
						<el-button size="mini" type="primary" plain @click="configPush(scope.row)"  v-if="scope.row.showOrder==-1">发布</el-button> 
						<el-button size="mini" type="warning" plain @click="configReject(scope.row)"  v-if="scope.row.showOrder!=-1">撤销</el-button> 
				        <el-button size="mini" type="danger" plain @click.native.prevent="deleteConfig(scope.$index, scope.row,tableData)">
			        		  删除
			            </el-button>
			             
				      </template>
				    </el-table-column>
				</el-table>
				
    			 <!-- 修改弹窗  使用dialog方式 -->
   				<el-dialog title="修改配置" :visible.sync="dialogEdit">
					    <el-form :inline="false" :model="editConfig" label-position="right" size="small">
							  <el-form-item label="素材类型">
							  	  <el-col :span="10">
							  	     <!-- 素材Id -->
									 <input name="addConfig.materialId" type="hidden" v-model="editConfig.materialId" >
								 	 <el-input v-model="editConfig.showTypeDesc" :disabled="true"></el-input>
								  </el-col>
						      </el-form-item>
						      <el-form-item label="素材名称">
						      	  <el-col :span="10">
								 	 <el-input v-model="editConfig.materialName" :disabled="true"></el-input>
								  </el-col>
						      </el-form-item>
							  <el-form-item label="轮播时长">
							  	<el-col :span="4">
							    	<el-input v-model="editConfig.hour" placeholder="时" ></el-input>
							    </el-col>
							    <el-col :span="1">&nbsp;时</el-col>
							    <el-col :span="4">
							    	<el-input v-model="editConfig.minute" placeholder="分"></el-input>
							    </el-col>
							     <el-col :span="1">&nbsp;分</el-col>
							    <el-col :span="4">
							    	<el-input v-model="editConfig.second" placeholder="秒" ></el-input>
							    </el-col>
							     <el-col :span="1">&nbsp;秒</el-col>
							  </el-form-item>
							  <el-form-item label="播放顺序">
							  	<el-col :span="10">
							    	<el-input v-model="editConfig.showOrder" placeholder="播放顺序"></el-input>
							    </el-col>
							  </el-form-item>
							  <el-form-item label="报表刷新时间">
							  	<el-col :span="10">
							    	<el-input v-model="editConfig.tableTimer" placeholder="报表刷新时间"></el-input>
							    </el-col>
							  </el-form-item>
						</el-form> 
						<div style="text-align: right; margin: 0">
						    <el-button size="mini" type="primary" @click="editForm()">确定</el-button>
						    <el-button size="mini" type="primary" @click="closeDialog()">取消</el-button>
						</div>
				</el-dialog> 
				
			</template>
		</div>
		
	</div>
</body>
</html>